<template>
	<z-nav-bar title="学员问题"></z-nav-bar>
	<view class="top flex_cc">
		<search-box placeholder="搜索问题关键字" @search="search"></search-box>
	</view>
	<view v-if="questionData.data && questionData.data.length">
		<view v-for="(item, index) in questionData.data" :key="index" class="question-item flex_sbc">
			<view>
				<view class="u-line-1" style="width: 454rpx">{{ item.name }}</view>
				<view v-if="item.status == 1" class="uni-color-grey z-font-24 uni-mt-16">已解决</view>
				<view v-else class="uni-orange z-font-24 uni-mt-16">未解决</view>
			</view>
			<view class="button" @click="viewQuestion(index)">{{ item.status == 1 ? '查看' : '解决问题' }}</view>
		</view>
	</view>
	<z-no-data v-else></z-no-data>
	<bottom-box v-if="!all" :buts="buts" @change="addQuestion"></bottom-box>
</template>

<script setup>
import { getPlayerQuestionList } from '@/api/question';
import { getPlayerDetial } from '@/api/player.js';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info');

const all = ref(0);
onLoad((opt) => {
	all.value = parseInt(opt.all || 0);
	fetchData();
});

const questionData = reactive({
	data: [],
	total: 0,
	pageSize: 10,
	pageNum: 1,
	query: {}
});
function fetchData() {
	const params = { pageSize: questionData.pageSize, pageNum: questionData.pageNum, ...questionData.query };
	if (!all.value) params.stuId = playerInfo.id;
	getPlayerQuestionList(params).then((res) => {
		if (questionData.pageNum === 1) questionData.data = res.rows;
		else questionData.data.push(...res.rows);
		questionData.total = res.total;
		uni.stopPullDownRefresh();
	});
}

onPullDownRefresh(() => {
	questionData.pageNum = 1;
	questionData.query = {};
	fetchData();
});

onReachBottom(() => {
	if (questionData.data.length >= questionData.total) return;
	questionData.pageNum += 1;
	fetchData();
});

function search(name) {
	questionData.pageNum = 1;
	questionData.query.name = name;
	fetchData();
}

async function viewQuestion(index) {
	const item = questionData.data[index];
	if (all.value || !playerInfo.id) {
		const playerInfo = await getPlayerDetial(item.relStudent);
		uni.setStorageSync('player-info', playerInfo);
	}
	uni.setStorageSync('edit-question', item);
	uni.navigateTo({
		url: '/pages/question/details/details',
		events: {
			change() {
				questionData.pageNum = 1;
				fetchData()
			}
		}
	});
}

const buts = [
	{
		label: '记录学员问题',
		color: '#008965',
		type: 'empty'
	}
];

function addQuestion() {
	uni.setStorageSync('edit-question', {});
	uni.navigateTo({
		url: '/pages/question/edit/create?type=1',
		events: {
			editDone(data) {
				questionData.pageNum = 1;
				questionData.query.name = '';
				fetchData();
			}
		}
	});
}
</script>

<style lang="scss">
@import 'index.scss';
</style>
